<template>
	<view class="memberType" :style="{'background':bgcolor}">
		<view class="userId" v-if="isUserShow">
			<image class="header" src="@/static/user/user.jpg" mode="widthFix"></image>
			<text class="phone">{{proxy.sjuLogin.getValue('miaoMaGJMobile')}}</text>
			<text class="loginOut" @click="loginOut">退出登录</text>

		</view>
		<swiper class="swiper" @change="oneScrollFun" :current="currentOne" previous-margin="35rpx" next-margin="35rpx">
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<image :src="item.imgUrl" mode="widthFix"></image>
				<view class="info">
					<view class="introduce" :style="{'color':item.textcolor}">
						<text class="count">{{item.count}}</text>
						<text class="openbox">
							<text class="open" v-if="!renew" :style="{'background':item.bgcolor}"
								@click="becomevipFun(index)">立即开通</text>
							<text v-if="renew" style="font-size: 20rpx;">
								已是{{vipLevel}}<br>到期时间：{{deadLine}}
							</text>
						</text>
						<text class="pay">{{item.price}}</text>
					</view>
					<text class="rightLocal" @click="statementFun(index)">
						<uni-icons type="info" :size="16"></uni-icons>
						业务说明</text>
				</view>
			</swiper-item>
		</swiper>
		<!-- banner图 -->
		<swiper class="swiper1" @change="twoScrollFun" :current=currentTwo
			:style="{height:'135px'}">
			<swiper-item v-for="(item,index) in serviceList" :key="index">
				<view class="tool">
					<view class="toolView" v-for="(childItem,childIndex) in item.child" :key="childIndex"
						@click="tabFun(childItem,childIndex)">
						<image :src="childItem.imgUrl" mode="widthFix"
							:style="childIndex==item.currentIndex?{'box-shadow':shadowCircle}:{}">
						</image>
						<text :style="childIndex==item.currentIndex?{'color':textColor}:{}">{{childItem.name}}</text>

						<view class="arrow" :class="childIndex==item.currentIndex?'show':'hide'">
							<image class="" :src="childItem.checkUrl" mode="widthFix"></image>
						</view>
						<!-- <view class="arrow" :style="childIndex==item.currentIndex?{}:{'display':isShow}">
								<image class="" :src="childItem.checkUrl" mode="widthFix"></image>
							</view> -->

					</view>
				</view>

			</swiper-item>
		</swiper>

		<!-- 导航栏 -->
		<view class="serviceInfo">
			<view class="onelist" v-if="serviceType==0">
				<div class="title">
					<div class="left">
						<!-- countUrl -->
						<image class="heightFix" :src="serviceList[0].child[serviceContent].countUrl" mode="heightFix">
						</image>
						<text>{{serviceList[0].child[serviceContent].subTitle}}</text>
					</div>
					<div class="right" @click="becomevipFun(serviceType)">去使用</div>
				</div>
				<view class="content">
					<view class="subTitle">
						权益说明
					</view>
					<text>
						{{serviceList[0].child[serviceContent].title}}
					</text>
					<text>
						{{serviceList[0].child[serviceContent].time}}
					</text>
					<text>
						{{serviceList[0].child[serviceContent].specs}}
					</text>
					<text>
						{{serviceList[0].child[serviceContent].content}}
					</text>
					<text>
						{{serviceList[0].child[serviceContent].range}}
					</text>
					<text>
						{{serviceList[0].child[serviceContent].limit}}
					</text>
					<text>
						{{serviceList[0].child[serviceContent].front}}

						<text style="font-size: 18px;font-weight: bold;"
							@click="callphone">{{serviceList[0].child[serviceContent].server}}</text>
						{{serviceList[0].child[serviceContent].after}}
					</text>
					<!-- <text>1.日常保洁：每月享9折日常保洁服务，3小时起订，不限次数；</text>
					<text>2.油烟机清洁：每月享9折油烟机清洗服务，包括中式油烟机、侧吸式油烟机、欧式油烟机，此服务为免拆洗，如需拆洗服务，可在下单预约后，家政人员与您确认订单时再修改；</text>
					<text>2.油烟机清洁：每月享9折油烟机清洗服务，包括中式油烟机、侧吸式油烟机、欧式油烟机，此服务为免拆洗，如需拆洗服务，可在下单预约后，家政人员与您确认订单时再修改；</text> -->

				</view>

			</view>
			<view class="onelist" v-if="serviceType==1">
				<div class="title">
					<div class="left">
						<image class="heightFix" :src="serviceList[1].child[serviceContent].countUrl" mode="heightFix">
						</image>
						<text>{{serviceList[1].child[serviceContent].subTitle}}</text>
					</div>
					<div class="right" @click="becomevipFun(serviceType)">去使用</div>
				</div>
				<view class="content">
					<view class="subTitle">
						权益说明
					</view>
					<text>
						{{serviceList[1].child[serviceContent].title}}
					</text>
					<text>
						{{serviceList[1].child[serviceContent].time}}
					</text>
					<text>
						{{serviceList[1].child[serviceContent].specs}}
					</text>
					<text>
						{{serviceList[1].child[serviceContent].content}}
					</text>
					<text>
						{{serviceList[1].child[serviceContent].range}}
					</text>
					<text>
						{{serviceList[1].child[serviceContent].limit}}
					</text>
					<text>
						{{serviceList[1].child[serviceContent].front}}

						<text style="font-size: 18px;font-weight: bold;"
							@click="callphone">{{serviceList[1].child[serviceContent].server}}</text>
						{{serviceList[1].child[serviceContent].after}}
					</text>

				</view>

			</view>
			<view class="onelist" v-if="serviceType==2">
				<div class="title">
					<div class="left">
						<image class="heightFix" :src="serviceList[2].child[serviceContent].countUrl" mode="heightFix">
						</image>
						<text>{{serviceList[3].child[serviceContent].subTitle}}</text>
					</div>
					<div class="right" @click="becomevipFun(serviceType)">去使用</div>
				</div>
				<view class="content">
					<view class="subTitle">
						权益说明
					</view>
					<text>
						{{serviceList[2].child[serviceContent].title}}
					</text>
					<text>
						{{serviceList[2].child[serviceContent].time}}
					</text>
					<text>
						{{serviceList[2].child[serviceContent].specs}}
					</text>
					<text>
						{{serviceList[2].child[serviceContent].content}}
					</text>
					<text>
						{{serviceList[2].child[serviceContent].range}}
					</text>
					<text>
						{{serviceList[2].child[serviceContent].limit}}
					</text>
					<text>
						{{serviceList[2].child[serviceContent].front}}

						<text style="font-size: 18px;font-weight: bold;"
							@click="callphone">{{serviceList[2].child[serviceContent].server}}</text>
						{{serviceList[2].child[serviceContent].after}}
					</text>

				</view>

			</view>
			<view class="onelist" v-if="serviceType==3">
				<div class="title">
					<div class="left">
						<image class="heightFix" :src="serviceList[3].child[serviceContent].countUrl" mode="heightFix">
						</image>
						<text>{{serviceList[3].child[serviceContent].subTitle}}</text>
					</div>
					<div class="right" @click="becomevipFun(serviceType)">去使用</div>
				</div>
				<view class="content">
					<view class="subTitle">
						权益说明
					</view>
					<text>
						{{serviceList[3].child[serviceContent].title}}
					</text>
					<text>
						{{serviceList[3].child[serviceContent].time}}
					</text>
					<text>
						{{serviceList[2].child[serviceContent].specs}}
					</text>
					<text>
						{{serviceList[3].child[serviceContent].content}}
					</text>
					<text>
						{{serviceList[3].child[serviceContent].range}}
					</text>
					<text>
						{{serviceList[3].child[serviceContent].limit}}
					</text>
					<text>
						{{serviceList[3].child[serviceContent].front}}

						<text style="font-size: 18px;font-weight: bold;"
							@click="callphone">{{serviceList[3].child[serviceContent].server}}</text>
						{{serviceList[3].child[serviceContent].after}}
					</text>

				</view>

			</view>

		</view>
		
	</view>
</template>
<script>
</script>
<script setup>
	const alertDialog = ref(null)

	const {
		mourn,
		theme
	} = useStore()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()

	const bgImage = ref('')
	// 是否首页哀悼模式
	const isMourn = ref(false)
	// banner图设置参数
	const isLqShow = ref(false)
	const one = ref(true)
	const indicatorDots = ref(true)
	const bgcolor = ref('linear-gradient(to bottom#F1DC9D,#FAEFD1)')
	const shadowCircle = ref('1px 1px 10px 0px #AB8D38')
	const isShow = ref('none')
	const textColor = ref('#BF8C44')
	const currentOne = ref(0)
	const currentTwo = ref(0)
	const serviceType = ref(0)
	const serviceContent = ref(0)
	const isUserShow = ref(false)
	const currentIndex = ref([{
		oneIndex: '0'
	}])
	const deadLine = ref()
	const renew = ref(false)
	const vipLevel = ref()

	const bannerList = ref([
		{
			imgUrl: '/static/banner/妙妈联合会员权益（优享版）@3x.png',
			count: '黄金会员8折，首单立减券21元，立减券15元',
			price: '月卡：30元/月 年卡：360元/年',
			textcolor: '#523A0E',
			bgcolor: 'linear-gradient(to right,#DBAB5C,#BF873D)'
		},
		{
			imgUrl: '/static/banner/妙妈联合会员权益（尊享版）@3x.png',
			count: '黄金会员8折，首单立减券18元',
			price: '月卡：30元/月 年卡：360元/年',
			textcolor: '#523A0E',
			bgcolor: 'linear-gradient(to right,#DBAB5C,#BF873D)'
		}
	])
	const serviceList = ref([{
			name: '妙妈联合会员权益（优享版）',
			currentIndex: 0,
			child: [{
					name: '日常保洁',
					imgUrl: '/static/king/8折日常保洁@3x.png',
					checkUrl: '/static/king/选中@3x.png',
					countUrl: '/static/king/8折日常保洁文字@3x.png',
					title: '服务项目：日常保洁3小时',
					time: '',
					specs: '',
					content: '服务内容：表面除尘（不含除胶、除油污水垢）、表面物品整理（桌面、床铺）、洗碗、日常垃圾清理',
					range: '服务范围：厨房、卫生间、卧室、客厅、餐厅、阳台等6大区域的清洁及内窗清洁（不含擦玻璃以及家电清洗）',
					limit: '',
					server: '',
					subTitle: '无限次日常保洁3小时'
				},
				{
					name: '油烟机清洁',
					imgUrl: '/static/king/8折油烟机清洁@3x.png',
					checkUrl: '/static/king/选中@3x.png',
					countUrl: '/static/king/8折油烟机清洁文字@3x.png',
					title: '服务项目：油烟机免拆洗',
					time: '服务时长：预计每台油烟机清洗时长不低于60分钟，因油烟机机型差异，以实际服务时长为准',
					specs: '',
					content: '',
					range: '服务范围：中式油烟机、侧吸式油烟机、欧式油烟机',
					limit: '',
					server: '',
					subTitle: '油烟机免拆洗清洁'
				},
				{
					name: '冰箱清洁',
					imgUrl: '/static/king/8折冰箱清洁@3x.png',
					checkUrl: '/static/king/选中@3x.png',
					countUrl: '/static/king/8折冰箱清洁文字@3x.png',
					title: '服务项目：冰箱清洁',
					time: '服务时长：2小时',
					specs: '服务规格：单/双开门冰箱清洁（≤200升）、三开门冰箱清洁（201-300升）、对开门/多开门冰箱清洁（＞300升）',
					content: '服务内容：冰箱除味、冰箱内部除霜除冰、冰箱内外部擦拭清洁、高温蒸汽消毒',
					range: '服务标准：冰箱内部无异味，无尘、无水痕；物品按类摆放整齐',
					limit: '服务限制：冰柜、玻璃门冷藏展示柜不提供服务',
					server: '',
					subTitle: '单/双开门、三开门、对开门/多开门'
				},
				{
					name: '专属客服',
					imgUrl: '/static/king/专属客服@3x.png',
					checkUrl: '/static/king/选中@3x.png',
					countUrl: '/static/king/专属客服.png',
					title: '',
					time: '',
					specs: '',
					content: '',
					range: '',
					limit: '',
					front: '享7*24小时专属',
					server: '4001768987',
					after: '客服优先服务',
					subTitle: '一站式服务'
				}
			]
		},
		{
			name: '妙妈联合会员权益（尊享版）',
			currentIndex: 0,
			child: [{
					name: '日常保洁',
					imgUrl: '/static/king/8折日常保洁@3x.png',
					checkUrl: '/static/king/选中@3x.png',
					countUrl: '/static/king/8折日常保洁文字@3x.png',
					title: '服务项目：日常保洁3小时',
					time: '',
					specs: '',
					content: '服务内容：表面除尘（不含除胶、除油污水垢）、表面物品整理（桌面、床铺）、洗碗、日常垃圾清理',
					range: '服务范围：厨房、卫生间、卧室、客厅、餐厅、阳台等6大区域的清洁及内窗清洁（不含擦玻璃以及家电清洗）',
					limit: '',
					server: '',
					subTitle: '无限次日常保洁3小时'
				},
				{
					name: '油烟机清洁',
					imgUrl: '/static/king/8折油烟机清洁@3x.png',
					checkUrl: '/static/king/选中@3x.png',
					countUrl: '/static/king/8折油烟机清洁文字@3x.png',
					title: '服务项目：油烟机免拆洗',
					time: '服务时长：预计每台油烟机清洗时长不低于60分钟，因油烟机机型差异，以实际服务时长为准',
					specs: '',
					content: '',
					range: '服务范围：中式油烟机、侧吸式油烟机、欧式油烟机',
					limit: '',
					server: '',
					subTitle: '油烟机免拆洗清洁'
				},
				{
					name: '冰箱清洁',
					imgUrl: '/static/king/8折冰箱清洁@3x.png',
					checkUrl: '/static/king/选中@3x.png',
					countUrl: '/static/king/8折冰箱清洁文字@3x.png',
					title: '服务项目：冰箱清洁',
					time: '服务时长：2小时',
					specs: '服务规格：单/双开门冰箱清洁（≤200升）、三开门冰箱清洁（201-300升）、对开门/多开门冰箱清洁（＞300升）',
					content: '服务内容：冰箱除味、冰箱内部除霜除冰、冰箱内外部擦拭清洁、高温蒸汽消毒',
					range: '服务标准：冰箱内部无异味，无尘、无水痕；物品按类摆放整齐',
					limit: '服务限制：冰柜、玻璃门冷藏展示柜不提供服务',
					server: '',
					subTitle: '单/双开门、三开门、对开门/多开门'
				},
				{
					name: '专属客服',
					imgUrl: '/static/king/专属客服@3x.png',
					checkUrl: '/static/king/选中@3x.png',
					countUrl: '/static/king/专属客服.png',
					title: '',
					time: '',
					specs: '',
					content: '',
					range: '',
					limit: '',
					front: '享7*24小时专属',
					server: '4001768987',
					after: '客服优先服务',
					subTitle: '一站式服务'
				}
			]
		}
	])


	onLoad(options => {
		if (!proxy.sjuBase.isNull(options.openid)) {
			proxy.sjuLogin.saveValue("miaoMaGJOpenid", options.openid);
		}
		isLogin()

	})
	onShow(() => {
		//uni.hideTabBar()
		// 检测页面是否需要登录
		proxy.sjuLogin.checkLogin('/tab/index')
		// #ifdef MP-LARK
		bgImage.value = theme.bgImage
		// #endif
		// 开启哀悼模式
		if (isMourn.value) {
			Theme.value = theme.Theme + mourn.mourningStyle
		}
		proxy.sjuTools.setTabBar()


		proxy.sjuRequest.request("/api/weixin/queryMember/" + proxy.sjuLogin.getValue("miaoMaGJOpenid")+ "/"+proxy.sjuConfig.appInfo.appId, 'post').then(
			res => {
				console.log(renew.value)
				console.log(res)
				if (res.data) {
					let level = res.data.memberLevel
					console.log(res)
					if (res.data.status == 1) {
						if (level == 'jp') {
							vipLevel.value = '优享版会员'
						} else if (level == 'jz') {
							vipLevel.value = '尊享版会员'
						}
						deadLine.value = res.data.expirationTime.split(' ')[0];
						renew.value = true
					} else if (res.data.status == 0) {
						renew.value = true
					}

				}

				console.log(deadLine.value)

			})
	})
	const oneScrollFun = (e) => {

		console.log(e)
		currentTwo.value = e.detail.current
		serviceType.value = e.detail.current
		//swiper切换之后切换背景颜色
		if (e.detail.current == 0) {
			bgcolor.value = 'linear-gradient(to bottom,#F1DC9D,#FAEFD1)'
			shadowCircle.value = '1px 1px 10px 0px #AB8D38'
			textColor.value = '#BF8C44'
		} else {
			bgcolor.value = 'linear-gradient(to bottom,#F1DC9D,#FAEFD1)'
			shadowCircle.value = '1px 1px 10px 0px #AB8D38'
			textColor.value = '#BF8C44'
		}
		//swiper切换之后，currentIndex重置
		for (let i = 0; i < serviceList.value.length; i++) {
			serviceList.value[i].currentIndex = 0
		}
		serviceContent.value = 0

	}
	const twoScrollFun = (e) => {
		console.log(e)
		currentOne.value = e.detail.current
		serviceType.value = e.detail.current
		if (e.detail.current == 0) {
			bgcolor.value = 'linear-gradient(to bottom,#F1DC9D,#FAEFD1)'
			shadowCircle.value = '1px 1px 10px 0px #AB8D38'
			textColor.value = '#BF8C44'
		} else {
			bgcolor.value = 'linear-gradient(to bottom,#F1DC9D,#FAEFD1)'
			shadowCircle.value = '1px 1px 10px 0px #AB8D38'
			textColor.value = '#BF8C44'
		}
	}
	const tabFun = (item, index) => {
		if (currentOne.value == 0) {
			serviceList.value[0].currentIndex = index
		} else(
			serviceList.value[1].currentIndex = index
		)
		serviceContent.value = index
		// currentIndex.value = index
	}
	const becomevipFun = (index) => {
		if (vipLevel.value) {
			// proxy.sjuNav.navigateTo('/store/store')
			proxy.sjuNav.switchTab('/tab/store')
		} else {
			proxy.sjuNav.navigateTo('/my/becomeVip?type=' + index)
		}
		console.log(index)


	}
	const statementFun = (index) => {
		console.log(index)
		proxy.sjuNav.navigateTo('/my/statement?type=' + index)
	}
	const callphone = () => {
		uni.makePhoneCall({
			phoneNumber: '4001768987',
			success: () => {
				console.log('拨打电话成功！');
			},
			fail: () => {
				console.error('拨打电话失败！');
			}
		});
	}
	const isLogin = () => {
		if (proxy.sjuLogin.getValue('miaoMaGJMobile')) {
			isUserShow.value = true
		}

	}
	const loginOut = () => {
		proxy.sjuAlert.showConfirm('您确定要退出妙妈管家吗?', () => {
			//点击确认后执行方法`
			proxy.sjuLogin.clearKey("miaoMaGJMobile");
			proxy.sjuNav.navigateTo('/intake/login')
		}, () => {
			//点击取消后执行方法

		}, '提示')

		// navTo('/intake/login')
	}
	const vipBtnFun = () => {
		isLqShow.value = true
	}
	const lqBtnFun = () => {
		one.value = false

	}
	const closeFun = () => {
		isLqShow.value = false
	}
</script>

<style lang="scss" scoped>
	.memberType {
		
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background: linear-gradient(to bottom, #F1DC9D,#FAEFD1);
		padding: 20rpx 0;
		box-sizing: border-box;

		.userId {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 10rpx 20rpx;

			.header {
				width: 70rpx;
				border-radius: 50%;
				margin-right: 10rpx
			}

			.phone {}

			.loginOut {
				font-size: 20rpx;
				margin-left: auto;
				padding: 10rpx 20rpx;
				color: #FFFDFD;
				background: #8D8C8A;
				border-radius: 30rpx;
			}

		}

		.bgShadow {
			box-shadow: 1px 1px 10px 0px #758DB1;
		}

		.textColor {
			color: #416bad !important;
			font-weight: bold;
		}
	}

	/* 轮播图 */
	.swiper {
		// width: 100%;
		margin: 0% !important;
		$swiper-width: 100%;
		$swiper-height: 376rpx;
		width: $swiper-width;
		height: $swiper-height;
		width: 100% !important;
		margin: 0% !important;

		swiper-item {
			width: $swiper-width;
			height: $swiper-height;
			padding: 0 8px;
			box-sizing: border-box;

			image {
				width: $swiper-width;
				height: $swiper-height;
			}
		}
	}

	.swiper {
		width: 94%;
		height: 39vw;
		margin: 0 3%;
		margin-top: 2vw;
		// border: 1px solid red;
		position: relative;


		.info {
			width: 100%;
			height: 100%;
			padding: 15rpx 40rpx;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-direction: row;

			.introduce {
				display: flex;
				flex-direction: column;
				padding-top: 13vw;

				box-sizing: border-box;
				color: #5E77AD;

				.count {
					font-size: 24rpx;
				}

				.openbox {
					height: 50rpx;
					padding: 20rpx 0;

					.open {
						color: #fff;
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						background: linear-gradient(to right,
								#6E9CD9,
								#497FD9);
						border-radius: 30px;

					}
				}

				.pay {
					// color: #5E77AD;
					font-size: 20rpx;
				}

			}

			.rightLocal {
				margin-left: auto;
				font-size: 20rpx;
			}


		}
	}

	.swiper1 {
		width: 96%;
		// height:auto;
		// height: 250rpx;
		// max-height:450px;
		min-height: 130px;
		margin: 0 2%
	}

	/* 导航栏 */
	.tool {
		width: 100%;
		margin-top: 10rpx;
		height: 300rpx;
		background-color: var(--accent-bg-color);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		// align-items: center;
		// justify-content:center;

		.toolView {
			width: 25%;
			height: 200rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 50px;
				border-radius: 50%;
			}

			.arrow {
				width: 30rpx;
				text-align: center;
				opacity: 0;
				filter: alpha(opacity=0);

				image {
					width: 100%;
				}
			}

			.hide {
				-webkit-transition: opacity 0.5s linear;
				-moz-transition: opacity 0.5s linear;
				-o-transition: opacity 0.5s linear;
				transition: opacity 0.5s linear;
				opacity: 0;
				filter: alpha(opacity=0);
			}

			.show {
				-webkit-transition: opacity 0.3s linear;
				-moz-transition: opacity 0.3s linear;
				-o-transition: opacity 0.3s linear;
				transition: opacity 0.3s linear;
				opacity: 1;
				filter: alpha(opacity=100);
			}

			.iconfont {
				color: var(--primary-color);
				font-size: 80rpx;
			}

			text {
				display: block;
				color: $text-color;
				margin-top: 10rpx;
				font-size: 24rpx;

				// :active {
				// 	transition: all 0.2s;
				// 	opacity: $opacity-active;
				// }
			}

			// :active {
			// 	transition: all 0.2s;
			// 	opacity: $opacity-active;

			// 	&+text {
			// 		transition: all 0.2s;
			// 		opacity: $opacity-active;
			// 	}
			// }
		}
	}

	.serviceInfo {
		width: 94%;
		height: auto;
		background: #fff;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin: 0 3%;

		.heightFix {
			height: 45rpx;
		}

		.title {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			background: linear-gradient(to right,
					#F8F0D9,
					#FCE1C3);

			.left {
				display: flex;
				flex-direction: column;
				color: #6A635D;
				font-size: 22rpx;

				image {
					width: 30vw;
				}

				text {
					height: 30px;
					line-height: 30px;
				}
			}

			.right {
				margin-left: auto;
				padding: 10rpx 20rpx;
				background: #F5A862;
				color: #fff;
				border-radius: 30rpx;

			}
		}

		.content {
			display: flex;
			flex-direction: column;

			.subTitle {
				text-align: center;
				font-size: 35rpx;
				color: #1F1F1F;
				font-weight: bold;
				margin: 20rpx 0;
			}

			text {
				line-height: 1.8;
			}
		}
	}

	.vipBtn {
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		// background: #F5A862;
		color: #fff;
		border-radius: 100%;
		position: fixed;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);

		.image {
			width: 50px;
		}
	}

	.shadowbox {}

	.reminderBtn {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;

		.amount {
			width: 60%;
			margin-left: 22%;
			margin-top: 40%
		}

		.btn {
			margin-top: 2%;
			width: 40%;
			margin-left: 30%
		}

		.text {
			text-align: center;
			color: #fff;
			line-height: 30px;

		}

		.close {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.closeBtn {
			display: flex;
			color: #ccc;
			width: 30px;
			height: 30px;
			border-radius: 100%;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.1);
			// text-align: center;
		}
	}
</style>